<section>
  <d-splitter class="splitter-border" style="height: 500px" orientation="vertical">
    <d-splitter-pane size="400px" minSize="100px" (sizeChange)="sizeChange($event)">
      <d-splitter style="height: 100%">
        <d-splitter-pane size="30%" minSize="20%" (sizeChange)="sizeChange($event)">
          <div class="pane-content">
            <h2>Left</h2>
            <div>width: 30%, min-width: 20%</div>
          </div>
        </d-splitter-pane>
        <d-splitter-pane minSize="15%">
          <d-splitter style="height: 100%" orientation="vertical">
            <d-splitter-pane size="50%" style="overflow: hidden">
              <div class="pane-content">
                <h2>Top</h2>
                <div>height: 50%</div>
              </div>
            </d-splitter-pane>
            <d-splitter-pane style="overflow: hidden">
              <div class="pane-content">
                <h2>Bottom</h2>
                <div>height: auto</div>
              </div>
            </d-splitter-pane>
          </d-splitter>
        </d-splitter-pane>
      </d-splitter>
    </d-splitter-pane>
    <d-splitter-pane style="overflow: hidden">
      <div class="pane-content">
        <h2>Bottom</h2>
        <div>height: auto</div>
      </div>
    </d-splitter-pane>
  </d-splitter>
</section>
